{% extends 'base/base.html' %}
{% load static app_extras i18n %}
{% block title %}列表 {{meta.title}}{% endblock %}
{% block extra-css %}
<style>
@media print {
  a[href]:after {
    content: none !important;
  }
  th {
    padding: 3px 4px !important;
  }
  td {
    padding: 2px 4px !important;
  }
  footer {
    padding: 10px 15px !important;
  }
}
.table>thead:first-child>tr:first-child>th>a {
  color: #333 !important;
}
.table>thead:first-child>tr:first-child>th>a:hover,
.table>thead:first-child>tr:first-child>th>a:active,
.table>thead:first-child>tr:first-child>th>a:focus {
  color: #111 !important;
}
</style>
{% endblock %}

{% block content-header %}
  <h1>{{meta.verbose_name}}
<small>
    {% block header-left %}
      {% if request.GET.search %}
        查询"<b class="text-red"> {{request.GET.search}} </b>",共<b class="text-red"> {{page_obj.paginator.count}} </b>条, 显示第<b class="text-red"> {{page_obj.start_index}} </b>条到<b class="text-red"> {{page_obj.end_index}} </b>条.
        {% else %}
        共<b> {{page_obj.paginator.count}} </b>条, 显示第<b> {{page_obj.start_index}} </b>到<b> {{page_obj.end_index}} </b>条.
      {% endif %}
    {% endblock %}
    <span> 选中 <b id="select_count">0</b> 条.</span>
    <a id="select_all"  title="{% trans "Click here to select the objects across all pages" %}" style="display: none;" class="hidden-xs" href="javascript:void(0)"> 选中所有的 {{page_obj.paginator.count}} 条</a>
      <a id="select_page" style="display: none;" href="javascript:void(0)" class="hidden-xs">
        <b class="text-red">已选中剩余条目,请谨慎操作.</b>
        清除选中所有的<b class="text-red"> {{page_obj.paginator.count}}</b> 条
      </a>
    </small>

  </h1>
{% endblock %}

{% block breadcrumb %}
<li><a href="{% url 'idcops:index' %}"><i class="fa fa-dashboard"></i>
  {% if meta %}{{meta.logo}}{% else %}仪表盘{% endif %}
</a></li>
<li><i class="{{meta.icon}}"></i> {{meta.verbose_name}}</li>
<li class="active hidden-xs">
  <a title="设置列表字段" href="{%url 'idcops:config_list' meta.model_name%}">
    <span> 配置列表</span>
  </a>
</li>
{% endblock %}

{% block main-content %}
<form id="action-form" action="" method="POST">{% csrf_token %}
  <div class="box">
    {% block box-header %}
    <div class="box-header with-border no-print clearfix">
      <div id="table-tools" class="pull-left">

        {%if can_create%}
        <a class="btn btn-default btn-sm margin-r-5" href="{%url 'idcops:new' meta.model_name %}">
          <i class="fa fa-plus"></i><span class="hidden-xs"> 新建</span>
        </a>
        {%endif%}

        <!--button type="submit" disabled="disabled" name="action" value="print" class="action-related disabled btn btn-default btn-sm margin-r-5">
          <i class="fa fa-print"></i><span class="hidden-xs"> 打印</span>
        </button-->

        {% block table-sub-tools %}
          {%if actions%}
          {% for a in actions%}
              <button type="submit" disabled="disabled" name="action" value="{{ a.1 }}" class="action-related disabled btn btn-default btn-sm margin-r-5">
                 <i class="{{a.2}}"></i><span class="hidden-xs"> {{ a.3 }}</span>
              </button>
          {%endfor%}
          {%endif%}
        {% endblock table-sub-tools %}

      </div>
      {% block search %}
      <div class="pull-right">
        <div id="search" class="input-group input-group-sm" style="min-width: 200px; max-width: 230px;">
          <input type="text" name="search" class="form-control pull-right" autofocus="autofocus" autocomplete="off" {%if request.GET.search%}value="{{ request.GET.search }}"{%endif%} placeholder="查询{{meta.verbose_name}}">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
          </div>
        </div>
      </div>
      {% endblock search %}
    </div>
    {% endblock %}

    <div class="box-body table-responsive">
        <table id="objects-list" class="table table-bordered table-hover table-condensed text-nowrap">
          <thead>
            <tr>
            {%for item in thead%}
              <th scope="col" name="{{item.field}}" {{item.class_attrib}}>
                {%if item.sortable%}
                  {%if item.is_sorted%}
                  <a title="正反序切换" href="{{item.toggle_link}}">{{item.text}}
                    <i class="fa fa-sort-alpha-{{item.sorted_key}}"></i>
                  </a>
                  <span class="no-print hidden-xs pull-right">
                    <a title="移除本列排序" href="{{item.remove_link}}">
                    <i class="fa fa-remove text-danger"></i>
                    </a>
                  </span>
                  {%else%}
                  <a title="点击可排序" href="{{item.toggle_link}}">{{item.text}}</a>
                  {%endif%}
                {%else%}
                  {{item.text}}
                {%endif%}
              </th>
            {%endfor%}
            </tr>
          </thead>
          <tbody>
          {%block objects-list%}
            {%for obj in tbody%}
              <tr>{{obj}}</tr>
            {%endfor%}
          {%endblock%}
          </tbody>
        </table>
    </div>
    <div class="box-footer no-print clearfix" style="display: block;">
      {% block box-footer-right %}
        {% if is_paginated %}
          <ul class="pagination pagination-sm no-margin pull-right">
            {% if paginate %}
            <div class="btn-group dropup pull-left">
              <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                {{paginate}}
              </ul>
            </div>
            {% endif %}
            {% if page_obj.has_previous %}
              <li><a href="{%get_query_string page=1 %}">首页</a></li>
              <li><a href="{%get_query_string page=page_obj.previous_page_number %}">上一页</a></li>
            {% else %}
              <li class="previous disabled"><a>上一页</a></li>
            {% endif %}
              <li class="previous disabled">
              <span>{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
              </li>
            {% if page_obj.has_next %}
              <li><a href="{%get_query_string page=page_obj.next_page_number%}">下一页</a></li>
              <li><a href="{%get_query_string page='last'%}">末页</a></li>
            {% else %}
              <li class="previous disabled"><a>下一页</a></li>
            {% endif %}
          </ul>
        {% endif %}
      {% endblock %}
    </div>
  </div>
</form>
{% endblock main-content %}
{% block extra-js %}
<script src="{%static 'idcops/js/jquery.shiftcheckbox.js'%}"></script>
<script src="{%static 'idcops/js/table-dragger.min.js'%}"></script>
<!--script src="{%static 'idcops/js/actions.js'%}"></script-->
<script>
$(document).ready(function (){

  $('[data-toggle="tooltip"]').tooltip();

  $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
  });

  var ItemCounts = {{object_list.count}};
  var ThCheckBox = $("table thead tr th input[type='checkbox']");
  var TdCheckBox = $("table tbody tr td input[type='checkbox']");
  var RelDom = $("#table-tools .action-related");
  TdCheckBox.shiftcheckbox();

  function updateColor() {
    TdCheckBox.filter(':checked').parent().parent().addClass('success');
    TdCheckBox.not(':checked').parent().parent().removeClass('success');
  }

  function updateRelated(){
  var checked = TdCheckBox.filter(':checked');
  if (checked.length>0) {
    RelDom.filter(':disabled').removeClass('disabled').attr('disabled', false);
  }else{
    RelDom.addClass('disabled').attr('disabled', true);
  }
  }

  updateSelect = function() {
    var checked = TdCheckBox.filter(':checked');
    $("#select_count").html(checked.length);
    if (checked.length < ItemCounts) {
      ThCheckBox.prop('checked', false).val('page');
      $("#select_all, #select_page").hide();
    } else {
      ThCheckBox.prop('checked', true);
      {%if is_paginated%}$("#select_all").show();{%endif%}
    }
    updateColor();
    updateRelated();
  }

  TdCheckBox.click(function (){
    updateSelect();
  });

  $("#select_all").click(function(){
    TdCheckBox.prop('checked', 'checked');
    updateSelect();
    var _count = {{page_obj.paginator.count}};
    $("#select_count").html(_count);
    ThCheckBox.val('all');
    $(this).hide();
    $("#select_page").show();
  });

  $("#action-toggle").click(function(){
    TdCheckBox.prop('checked', $(this).prop('checked'));
    updateSelect();
    {%if is_paginated%}
      if (ThCheckBox.is('input:checked')){
        $("#select_all").show();
      } else {
        $("#select_all").hide();
      }
    {%endif%}
  });

  $("#select_page").click(function(){
    updateSelect();
    ThCheckBox.val('page');
    $(this).hide();
    $("#select_all").show();
  })

  $("#search button").on('click', function(e) {
      var value = $("#search input").val();
      if (value) {
        document.location.href="?search="+value+"";
      }
  });

  $(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
  });
  
  $("#search input").on("keydown", function (e) {
      if (e.keyCode == 13) {
        var value = $("#search input").val();
        if (value) {
          document.location.href="?search="+value+"";
        }
      }
  });

});
</script>

{% endblock extra-js %}
